<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="import" href="../../polymer.html">
    <title>Gestures Demo</title>
    <style>
      x-gestures {
        display: block;
        height: 100px;
        width: 100px;
        background: gray;
      }
    </style>
  </head>
  <body>
    <x-gestures id="host"></x-gestures>
    <dom-module id="x-gestures">
      <template>
        <style>
          #inner {
            height: 20px;
            width: 20px;
            background: blue;
          }
        </style>
        <a href="#" on-click="linkclick" on-touchend="removeLink">LINK</a>
        <div id="inner" on-tap="divtap"></div>
      </template>
    </dom-module>
    <script>
      Polymer({
        is: 'x-gestures',
        listeners: {
          'tap': 'logger',
          'down': 'logger',
          'up': 'logger',
          'click': 'logger',
          'track': 'track'
        },
        logger: function(e, detail) {
          console.log(e.type);
          console.log(detail);
        },
        track: function(e, detail) {
          this.logger(e, detail);
          if (detail.state === 'end') {
            console.log(detail.hover());
          }
        },
        linkclick: function(e) {
          console.log('CLICK!');
        },
        removeLink: function(e) {
          console.log('REMOVE!');
          e.target.remove();
        },
        divtap: function(e) {
          console.log('div tap!');
        }
      });
    </script>
  </body>
</html>
